<template>
  <div class="alertList">
    <div class="alertHandleTab">
      <div
        class="handleTabItem"
        v-for="(handle, index) in alertHandleType"
        :class="currentAlertHandleTab == index ? 'currentHandle' : ''"
        @click="changeHandeTab(index)"
      >
        <div class="handleTabName">
          {{ handle.name }}
        </div>
        <div class="row" v-if="currentAlertHandleTab == index"></div>
      </div>
    </div>

    <!-- <div class="chart">
            <base-echart ref="chartRef" :show-no-data="true" :options="state.alertListOption" height="200" />
        </div> -->
    <div class="alertTypeTab">
      <div
        class="typeItem"
        v-for="(type, typeindex) in alertType"
        @click="alertGroupIndex = typeindex"
        :class="alertGroupIndex == typeindex ? 'currentType' : ''"
      >
        {{ typeInfo(type) }}
      </div>
    </div>
    <div class="list">
      <alertList
        :handleStatus="alertHandleType[currentAlertHandleTab].handleStatus"
        :alertGroup="alertType[alertGroupIndex].alertGrade"
      ></alertList>
    </div>
  </div>
</template>

<script setup lang="ts">
import alertList from "./realTime-alarms.vue";
import { alertListOption } from "./config/config";
import { cloneDeep } from "lodash-es";
import { reactive, ref, computed, onMounted, nextTick, onUnmounted } from "vue";
import { getAlertData } from "@/api/alert";
import { NewGeneral } from "@/api/screen/equipment";
import { useIds } from "@/stores/screen/ids";
const { getsessionStorage } = useIds();
const state = reactive<any>({ alertListOption });
const initDataOption = {
  // legend: { data: [] as any },
  series: { data: [] as any },
  title: { subtext: "" as any },
};
var d = new Date();
var date = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
const alertHandleType = [
  { name: "全部", handleStatus: "" },
  { name: "未处理", handleStatus: "0" },
  { name: "已处理", handleStatus: "1" },
];
const alertGroupIndex = ref(0);
const currentAlertHandleTab = ref(1);
const alertType = ref([
  {
    name: "全部",
    value: 10,
    alertGrade: "",
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_ALL",
  },
  {
    name: "告警",
    value: 8,
    alertGrade: "WARN",
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_WARN",
  },
  {
    name: "紧急",
    value: 2,
    alertGrade: "ERROR",
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_ERROR",
  },
]);

const typeInfo = (item) => {
  if (item.name == "全部") {
    return item.name;
  }
  let info = item.name + "：" + item.value;
  return info;
};

const formatOptions = (data: any, text: any) => {
  const dataOption = cloneDeep(initDataOption);
  data.forEach((item: any) => {
    dataOption.series.data.push({
      name: item.name,
      value: item.value,
    });
  });
  dataOption.series.data = data;
  dataOption.title.subtext = `{a|${text}}`;
  nextTick(() => {
    state.alertListOption = dataOption;
  });
};
// 由告警等级判断文字颜色
const textColor = (grop) => {
  switch (grop) {
    case "":
      return "color: #FFFFFF;";
    case "INFO":
      return "color: #26BEFF;";

    case "WARN":
      return "color: #FFCF26;";
    case "ERROR":
      return "color: #E04928;";
  }
};
const config = ref([
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: 0,
      alertGrade: "",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_ALL",
  },
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: 0,
      alertGrade: "WARN",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_WARN",
  },
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: 0,
      alertGrade: "ERROR",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_ERROR",
  },
]);
const resData = ref([]);
const renderKey = async () => {
  resData.value = [];
  let { code, data } = (await NewGeneral(config.value)) as any;
  let total = 0;
  if (code == 200) {
    alertType.value.forEach((item) => {
      if (!data[item.key]) {
        console.log("没有数据");
        if (item.name != "全部") {
          resData.value.push({ name: item.name, value: 0 });
        }
      } else {
        item.value = data[item.key].data;
        if (item.name != "全部") {
          resData.value.push({ name: item.name, value: data[item.key].data });
        } else {
          total = data[item.key].data;
        }
      }
    });
  }
  formatOptions(resData.value, total);
};

const changeHandeTab = (index: any) => {
  currentAlertHandleTab.value = index;
};
const pollingTimer = ref();
const setPollingTimer = () => {
  pollingTimer.value && clearInterval(pollingTimer.value);
  pollingTimer.value = setInterval(() => {
    renderKey();
  }, 30000);
};
onMounted(() => {
  // renderKey();
  // setPollingTimer();
});
onUnmounted(() => {
  // pollingTimer.value && clearInterval(pollingTimer.value);
});
</script>

<style scoped lang="scss">
.alertList {
  width: 100%;
  height: 100%;
  padding-top: clamp(0.938rem, 0.78vw, 1.875rem);
  box-sizing: border-box;

  .alertHandleTab {
    padding-left: clamp(3.125rem, 2.6vw, 6.25rem);
    padding-right: clamp(3.125rem, 2.6vw, 6.25rem);
    width: 100%;
    box-sizing: border-box;
    display: flex;

    .handleTabItem {
      flex: 1;
      color: white;
      margin-top: auto;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .row {
        width: clamp(2.875rem, 2.4vw, 5.75rem);
        height: clamp(0.25rem, 0.21vw, 0.5rem);

        background: linear-gradient(
          90deg,
          #28b2ff 0%,
          rgba(40, 178, 255, 0) 100%
        );
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        position: absolute;
        bottom: -30%;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .currentHandle {
      color: #0f94faff;
    }
  }

  .alertTypeTab {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    margin-top: clamp(1rem, 0.83vw, 2rem);
    background-color: rgba(4, 19, 31, 0.4);
    padding: clamp(0.438rem, 0.36vw, 0.875rem) 0;
    box-sizing: border-box;
    border-radius: 24px;

    .typeItem {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: clamp(0.25rem, 0.21vw, 0.5rem);
      color: rgba(15, 148, 250, 1);
    }

    .currentType {
      border: 1px solid #0f94faff;
      border-radius: 24px;
      background-color: rgba(5, 45, 77, 0.6);
    }
  }
}
</style>
